<template>
  <div style="width: 228px;margin-left: 10px">
    登录名: <el-input type="text"
                  v-model="searchData.user"
                  style="width: 100px;"
  />
    <el-button @click="searchAccountInfo()">搜索</el-button>
  </div>
  <el-table
      :data="tableData"
      border
      style="width: 900px">
    <el-table-column
        prop="id"
        label="ID"
        width="180">
    </el-table-column>
    <el-table-column
        prop="userName"
        label="登录名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="email"
        label="邮箱"
        width="180">
    </el-table-column>
    <el-table-column
        prop="identity"
        label="身份"
        width="180">
    </el-table-column>
    <el-table-column
        label="操作">
      <template v-slot="scope">
        <el-button type="text" size="small" @click="chickDel(scope.row.id)">
          删除
        </el-button>
        <el-button type="text" size="small" @click="chickEdit(scope.row)">
          修改
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      v-model:currentPage=searchData.pageNum
      v-model:page-size=searchData.pageSize
      :page-sizes="[10, 20, 30, 40]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total=tableSize
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
  <el-dialog
      v-model="centerDialogVisible"
      title="Notice"
      width="30%"
      destroy-on-close
      center
  >
    <span
    >确认进行该操作？</span
    >
    <div>
      <strong>Extra content (Not rendered)</strong>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="delAccount(false)">Cancel</el-button>
        <el-button type="primary" @click="delAccount(true)"
        >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>

  <el-dialog
      v-model="editDialogShow"
      title="Notice"
      width="30%"
      destroy-on-close
      center>
    新密码:
    <el-input v-model="editInfoPass"></el-input>
    确认密码:
    <el-input v-model="editInfoPassConfirm"></el-input>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editInfoFun(false)">Cancel</el-button>
        <el-button type="primary" @click="editInfoFun(true)"
        >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import {delAccountApi, editAccountPassWord, searchAccount} from "../../api/api";
import {reactive} from "@vue/reactivity";
import {ElMessage} from "element-plus";

const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let tableSize = ref(0)
let searchData = reactive({
  pageSize: 10,
  pageNum: 1,
  user:''
})
let tableData = ref([{
  id: '',
  userName: '',
  email: '',
  identity: ''
}])

function searchAccountInfo() {
  searchAccount(searchData)
      .then(res => {
        tableData.value = res.data.list;
        tableSize.value = res.data.count;
      })
}

const handleSizeChange = (val: number) => {
  searchAccountInfo();
}
const handleCurrentChange = (val: number) => {
  searchAccountInfo();
}
let accountId = ''
const centerDialogVisible = ref(false)

function chickDel(rowId: string) {
  accountId = rowId;
  centerDialogVisible.value = true;
}

function delAccount(state: boolean) {
  if (state) {
    delAccountApi(accountId)
        .then(res => {
          // @ts-ignore
          if (res.code !== 200) {
            ElMessage.error('删除失败!')
          } else {
            ElMessage.info('删除成功')
          }
        }).catch(error => {
      console.log(error)
    })
        .finally(() => {
          searchAccountInfo();
        })
  } else {
    searchAccountInfo();
  }
  accountId = ''
  centerDialogVisible.value = false
}

let editInfoPass = ref('');
let editInfoPassConfirm = ref('');
let editInfo = {
  id: '',
  userName: '',
  email: '',
  identity: ''
};
const editDialogShow = ref(false)

function chickEdit(rowInfo: any) {
  editInfo = rowInfo;
  editDialogShow.value = true;
}

function editInfoFun(state: boolean) {
  if (state) {
    if (editInfoPass === editInfoPassConfirm) {
      let data = {
        id: editInfo.id,
        pass: editInfoPass
      }
      editAccountPassWord(data)
          .then(res => {
            // @ts-ignore
            if (res.code !== 200){
              ElMessage.error(res.data)
            }
          })
          .catch(error => {
            console.log(error)
          })
          .finally(() => {
            initEdit();
          })
    } else {
      ElMessage.error('两次密码输入不相同!');
      initEdit();
    }
  }else {
    initEdit()
  }
}

function initEdit() {
  searchAccountInfo();
  editDialogShow.value = false;
  editInfoPass = ref('')
  editInfoPassConfirm = ref('')
  editInfo = {
    id: '',
    userName: '',
    email: '',
    identity: ''
  }
}

onMounted(() => {
  searchAccountInfo()
})
</script>

<style scoped>

</style>
